<template>
  <el-dialog :model-value="modelValue" @close="close()" draggable :title="title">
    <el-row>
      <el-table :data="userRolelist" :border="true" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
        <el-table-column prop="roleName" label="姓名" />
        <el-table-column prop="isCurrentUser" label="选择">
          <template #default="scope">
            <el-switch v-model="scope.row.isCurrentUser" @change="changeIsCurrentRole(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div class="table-buttom-options">
        <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
          @change="query()"></Pagination>
      </div>
    </el-row>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="saveForm()" v-button="['api:sys:sysuserrole:createbyuser']">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import Pagination from "@/components/pagination/pagination.vue";
import UserRoleApi, {
  QueryRoleByUser,
  UserRoleByUser,
  UserRoleCreateByUser,
} from "@/api/sys/user/userRole";

const props = defineProps({
  modelValue: Boolean,
  userId: String,
  title: String,
});

onMounted(async () => {
  await query();
});

//查询条件
const search = reactive<QueryRoleByUser>({
  searchString: "",
  userId: props.userId,
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

const userRolelist = ref<UserRoleByUser[]>();
const selectRoleIdList = ref([]);

const query = async () => {
  const { dataList, totalCount, dataExt } = await UserRoleApi.queryRoleByUser(search);
  userRolelist.value = dataList;
  search.total = totalCount;

  if (selectRoleIdList.value.length <= 0) {
    selectRoleIdList.value = dataExt;
  } else {
    userRolelist.value.forEach((role) => {
      role.isCurrentUser = selectRoleIdList.value.includes(role.id);
    });
  }
};

const changeIsCurrentRole = async (userRole: UserRoleByUser) => {
  if (userRole.isCurrentUser && !selectRoleIdList.value.includes(userRole.id)) {
    selectRoleIdList.value.push(userRole.id);
  } else if (selectRoleIdList.value.includes(userRole.id)) {
    selectRoleIdList.value.splice(
      selectRoleIdList.value.findIndex((item) => item === userRole.id),
      1
    );
  }
};
const emits = defineEmits(["update:modelValue", "success"]);

//提交数据
const userRole = ref<UserRoleCreateByUser>({
  userId: "",
  roleIdList: [],
});
const saveForm = async () => {
  userRole.value.userId = props.userId;
  userRole.value.roleIdList = selectRoleIdList.value;
  const { success, message } = await UserRoleApi.createByUser(userRole.value);
  if (success) {
    emits("success");
    ElNotification({
      title: message,
      type: "success",
    });
    close();
  } else {
    ElNotification({
      title: message,
      type: "error",
    });
  }
};

//提交成功
const handleAfterConfirm = (params) => {
  emits("success");
};

const close = () => {
  emits("update:modelValue");
};
</script>
